<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form
        ref="form"
        :model="form"
        label-position="left"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="建筑群">
              <FilterSelect2
                v-model="form.buildingId"
                :optionlist="buildingList"
                @updateModelValue="changeBuilding"
                :valuekey="{ name: 'name', value: 'id' }"
              ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="用户名称">
              <el-input
                v-model="form.userName"
                size="small"
                placeholder="请输入用户名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="" class="button-form-item">
              <div class="button-group">
                <el-button @click="reset" size="small">重 置</el-button>
                <el-button @click="getDataList()" type="primary" size="small"
                  >查 询</el-button
                >
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="title" style="display: flex; justify-content: space-between">
        <div>电表清单</div>
        <div>
          <TopTile
            @command="command"
            @daochu="daochu"
            @shuaxin="shuaxin"
          ></TopTile>
        </div>
      </div>
      <div class="tablebox">
        <TableColumn
          ref="tabledata"
          :tableData="tableData"
          :tableConfig="tableConfig"
          :issize="issize"
        >
        </TableColumn>
      </div>
      <!-- 底部分页 -->
      <div class="fenye">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="pageobj.pageNo"
          :page-size="pageobj.pageSize"
          @current-change="getDataList"
          :total="+totalCount"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel.js'
import { getMeterListApi } from '@/api/prwpaid/report-forms/meter-list'
import { getloginlistapi } from '@/api/prwpaid/file-management/Architectural-complex'

export default {
  name: 'MeterList',
  components: { TopTile, TableColumn },
  data() {
    return {
      form: {
        buildingId: '',
        userName: ''
      },
      buildingList: [],
      tableData: [],
      tableConfig: [
        { label: '序号', type: 'index', center: 'center', width: '70' },
        {
          label: '建筑群',
          prop: 'buildingsName',
          center: 'center',
          minWidth: '120'
        },
        {
          label: '企业/用户名称',
          prop: 'customerName',
          center: 'center',
          minWidth: '150'
        },
        {
          label: '电表名称',
          prop: 'meterName',
          center: 'center',
          minWidth: '120'
        },
        {
          label: '地址',
          prop: 'meterAddress',
          center: 'center',
          minWidth: '200'
        },
        { label: 'CT', prop: 'ct', center: 'center', minWidth: '80' },
        { label: 'PT', prop: 'pt', center: 'center', minWidth: '80' }
      ],
      totalCount: 0,
      pageobj: {
        pageNo: 1,
        pageSize: 20
      },
      issize: 'medium'
    }
  },
  async mounted() {
    // 获取建筑群列表
    const res = await getloginlistapi()
    this.buildingList = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.buildingList.some(
      (item) => item.id == localbuildingId
    )
    if (isBuildIdInArray) {
      this.form.buildingId = localbuildingId || ''
    } else {
      this.form.buildingId = ''
    }
    this.getDataList()
  },
  methods: {
    // 建筑群改变
    changeBuilding(val) {
      localStorage.setItem('buildingId', val)
      this.form.buildingId = val
      this.pageobj.pageNo = 1
      this.getDataList()
    },
    // 获取表格数据
    async getDataList() {
      if (this.$refs.tabledata) {
        this.$refs.tabledata.loading = true
      }

      try {
        const params = {
          buildingId: this.form.buildingId || undefined,
          customerName: this.form.userName || undefined,
          pageNo: this.pageobj.pageNo - 1,
          pageSize: this.pageobj.pageSize
        }

        const res = await getMeterListApi(params)

        if (res.code === 200 && res.data) {
          this.tableData = res.data.list || []
          this.totalCount = res.data.totalCount || 0
        } else {
          this.$message.error(res.message || '获取数据失败')
          this.tableData = []
          this.totalCount = 0
        }
      } catch (error) {
        console.error('获取数据失败:', error)
        this.$message.error('获取数据失败')
        this.tableData = []
        this.totalCount = 0
      } finally {
        if (this.$refs.tabledata) {
          this.$refs.tabledata.loading = false
        }
      }
    },
    // 重置
    reset() {
      localStorage.removeItem('buildingId')
      this.form = {
        buildingId: '',
        userName: ''
      }
      this.pageobj.pageNo = 1
      this.getDataList()
    },
    // 导出
    daochu() {
      exportexcel(
        'mbm-microservice-biz/mbm/archives/room/meter/exportExcel',
        {
          buildingId: this.form.buildingId || undefined,
          customerName: this.form.userName || undefined
        },
        '电表清单'
      )
    },
    // 刷新
    shuaxin() {
      this.$message.success('数据刷新成功')
      this.getDataList()
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bigbox {
  height: 100%;
  padding: 10px;

  .topbox {
    height: 80px;
    padding: 20px;
    margin-bottom: 10px;
    background-color: #fff;

    ::v-deep .button-form-item {
      margin-bottom: 0;
      text-align: right;

      .el-form-item__content {
        justify-content: flex-end;
      }
    }

    .button-group {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
  }

  .bodybox {
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;

    .title {
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: bold;
    }

    .tablebox {
      flex: 1;
      overflow: auto;
    }

    .fenye {
      margin-top: 20px;
      text-align: right;
    }
  }
}
</style>
